<template>
  <view :class="[theme, 'flex-1 overflow-hidden h-full']">
    <view class="relative">
      <uv-image width="100%" height="460" src="/static/img/ranking/header-ranking.png" />

      <view class="absolute color-base justify-center lh-[2]"
        style="top: 60rpx; right: 60rpx; bottom: 60rpx; left: 60rpx;">
        <text class="fw-700 text-56">推广人数周榜</text>
        <text class="text-28 fw-700">Weekly Ranking of Promoters</text>
        <!-- <text class="text-34">服务商积分交易周排行榜</text> -->
        <label v-if="rankings.time" class="fw-700">
          <text>本轮排名倒计时：</text>
          <uv-count-down :color="$config.COLOR_WHITE" separatorColor="#fff" bg-color="transparent" :showBorder="false"
            separator="zh" :timestamp="rankings.time" fontSize="24" separatorSize="24" />
        </label>
      </view>
    </view>

    <view class="flex-1 b-rounded-16 overflow-hidden"
      style="z-index: 1; width: auto; background-color: rgba(38,42,53,0.73); backdrop-filter: blur(10rpx); margin: -60rpx 30rpx 30rpx; box-shadow: 0 0 20rpx 0 rgba(0,0,0,0.1);">
      <view class="flex-row text-26 items-center text-center" style="height: 90rpx;">
        <text class="flex-[2] ml-12 mr-12 w-60">排行</text>
        <text class="flex-[2]">头像</text>
        <text class="flex-[3] ml-12 mr-12">昵称</text>
        <text class="flex-[3] mr-12">数量</text>
      </view>

      <scroll-view scroll-y class="flex-1 overflow-hidden">
        <view>
          <view v-for="(item, index) in rankings.list" class="flex-row items-center"
            style="height: 120rpx; border-bottom: 2rpx dashed rgba(151,151,151,0.1);">
            <view class="flex-[2] ml-12 mr-12 items-center">
              <uv-icon v-if="index < 3" size="66" :name="`/static/img/ranking/ranking-${index + 1}.png`" />
              <text v-else class="fw-700 text-32">{{ index + 1 }}</text>
            </view>
            <label class="flex-[2] justify-center">
              <uv-image radius="50%" width="80" height="80" :src="include(item.avatar || `/static/img/default-avatar.png`)" />
            </label>
            <text class="flex-[3] ml-12 mr-12 text-center ellipsis text-26">
              {{ item.nickname || "-" }}
            </text>
            <text class="flex-[3] text-center ellipsis fw-700 text-32">
              {{ item.num || 0 }}
            </text>
          </view>
          <view class="items-center mt-30 mb-30">
            <uv-image v-if="!rankings.list.length" :showLoading="false" width="400" height="400" class="mt-60 mb-30"
              src="/static/img/blank.png" mode="aspectFit" />
            <uv-load-more :status="rankings.status" />
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { onLoad, onPullDownRefresh } from "@dcloudio/uni-app";
import { reactive } from "vue";

const { theme } = useMapState(["theme"]);
const { $config = {} } = getApp().globalData || {};

const rankings = reactive({
  time: "",
  list: [] as any[],
  status: "nomore"
});

onLoad(() => getData());

onPullDownRefresh(() => {
  getData();
  setTimeout(uni.stopPullDownRefresh, 360);
});

const getData = () => {
  rankings.status = "loading";
  uni.request({
    url: "/leaderBoard",
    data: { type: 2 },
    success({ data }: any) {
      rankings.time = data.time || 0;
      rankings.list = data.list || [];
      rankings.status = "nomore";
    }
  });
}

</script>

<style>
page {
  height: 100%;
}
</style>